
//全局变量，记录今天对应的下标位置，以便于进行对今天进行标记
let i1=0,j1=0;
//中国的所有假期表（农历）
let vacation_nongli = [
  {
    name:'除夕',
    time:'腊月卅'
  },
  {
    name:'春节',
    time:'正月初一'
  },
  {
    name:'元宵节',
    time:'正月十五'
  },
  {
    name:'清明节',
    time:''
  },
  {
    name:'端午节',
    time:'五月初五'
  },
  {
    name:'七夕节',
    time:'七月初七'
  },
  {
    name:'中秋节',
    time:'八月十五'
  },
  {
    name:'重阳节',
    time:'九月初九'
  },
  {
    name:'寒衣节',
    time:'十月初一'
  },
  {
    name:'腊八节',
    time:'腊月初八'
  },
  {
    name:'小年',
    time:'腊月廿三'
  },
  {
    name:'小年',
    time:'腊月廿三'
  },
]
//阳历
let vacation_yangli = [
  {
    name:'元旦',
    time:'1-1'
  },
  {
    name:'情人节',
    time:'2-14'
  },
  {
    name:'妇女节',
    time:'3-8'
  },
  {
    name:'白色情人节',
    time:'3-14'
  },
  {
    name:'愚人节',
    time:'4-1'
  },
  {
    name:'儿童节',
    time:'6-1'
  },
  {
    name:'建党节',
    time:'7-1'
  },
  {
    name:'建军节',
    time:'8-1'
  },
  {
    name:'教师节',
    time:'9-10'
  },
  {
    name:'国庆节',
    time:'10-1'
  },
  {
    name:'教师节',
    time:'9-10'
  },
  {
    name:'万圣节',
    time:'10-31'
  },
  {
    name:'圣诞节',
    time:'12-25'
  }
]

//计算渲染某个月的页面图
function renderMonth(year,month,data){
  let time1 = new Date(year,month-1,1);
  let firstWeek = Number(time1.getDay());
  // console.log(firstWeek)
  let last = 1;
  let index = 0;
  
  //渲染mei月的1-30/31
  for(let i = 1;i < data.children.length ;i++) {
    let start = i == 1?firstWeek:0;
    for(let j = start ;j < 7 && last <= caclDayofMonth(year,month);j++) {
      let jieri = 0; //让节日的颜色不同
      let vacationOrNongli = calcNongli(new Date(year,month-1,last),true);
      //如果有节日，把节日替换农历
      // console.log(vacationOrNongli)
      for(let i = 0;i < vacation_nongli.length;i++){
        if(vacation_nongli[i].time == vacationOrNongli) {
          vacationOrNongli = vacation_nongli[i].name;
          jieri++;
        }
      }
      for(let i = 0;i < vacation_yangli.length;i++){
        if(vacation_yangli[i].time == `${month}-${last}`) {
          vacationOrNongli = vacation_yangli[i].name;
          jieri++
        }
      }
      //渲染阳历和农历
      if(jieri == 0) {
        data.children[i].children[j].innerHTML = `<p class="yangli">${last}</p><p class="nongli">${vacationOrNongli}</p>`
      }else{
        data.children[i].children[j].innerHTML = `<p class="yangli">${last}</p><p class="jieri">${vacationOrNongli}</p>`
      }
      data.children[i].children[j].style.color = 'red';
      // console.log( data.children[i].children[j])
      if(last == caclDayofMonth(year,month)){
        index = j;
      }
      //把今天突出显示
      // console.log(month == month_now)
      if(last == day_now && year === year_now && month === month_now){
        data.children[i].children[j].style.backgroundColor = 'rgba(10, 126, 126, 0.593)';
        data.children[i].children[j].style.position = 'relative';
        let p = document.createElement('p');
        p.innerHTML = `Today!`;
        p.setAttribute('id','today');
        data.children[i].children[j].appendChild(p)
        i1 = i;
        j1 = j;
      }
      if(last == day_now &&(year != year_now || month != month_now)){
        data.children[i1].children[j1].style.backgroundColor = 'transparent'
        // console.log(data.children[i1].children[j1])
      }
      last ++;
      // console.log(last)
    } 
  }
  last = 1;
  //渲染这个月的上个月残留
  let front_month = caclDayofMonth(year,month);
  if(firstWeek != 0) {
    for(let i = firstWeek-1; i >= 0; i--) {
      data.children[1].children[i].innerText = front_month;
      data.children[1].children[i].style.color = 'grey'
      front_month--;
    }
  }
  // 处理下个月的
  for(let i = index+1;i < 7;i++){
    data.children[data.children.length-1].children[i].innerText = last;
    data.children[data.children.length-1].children[i].style.color = 'pink';
    last++;
  }
}
//入口文件
window.onload = function () {
  let day_num = document.getElementById('day_num');
  let year_now_1 = document.getElementById('year');
  let year_month_1 = document.getElementById('month');
  let data = document.getElementsByClassName('data')[0].children[0];
  let table = document.getElementById('table');
  //获取连个按钮
  let buntton_left = document.getElementById('toLeft');
  let buntton_Right = document.getElementById('toRight');
  //处理title时间
  day_num.innerText = week_now;
  year_now_1.innerText = year_now;
  year_month_1.innerText = month_now;
  //处理数据
  // 渲染日历
  renderMonth(year_now,month_now,data)
  let center_month = month_now;
  let cneter_year = year_now;
  //点击事件
  buntton_left.onclick = function () {
    center_month -- ;
    if(center_month < 1) {
      center_month = 12;
      cneter_year--;
    }
    year_month_1.innerText = center_month;
    year_now_1.innerText = cneter_year;
    renderMonth(cneter_year,center_month,data)
  }
  buntton_Right.onclick = function () {
    center_month ++ ;
    if(center_month > 12) {
      center_month = 1;
      cneter_year++;
    }
    year_month_1.innerText = center_month;
    year_now_1.innerText = cneter_year;
    renderMonth(cneter_year,center_month,data)
  }
  //每一天的点击事件
  table.onclick =function (e) {
    console.log(e.target)
    if(e.target.tagName == 'TD'){
      let dayy = calcDayNum(cneter_year,center_month,Number(e.target.children[0].innerText));
      // console.log(dayy)
      if(dayy == 0) {
        day_num.innerText = week_now;
      }else if(dayy > 0){
        day_num.innerText = `${dayy}天后`;
      }else{
        day_num.innerText = `${Math.abs(dayy)}天前`;
      }
    }
    if(e.target.tagName == 'P'){
      let dayy = calcDayNum(cneter_year,center_month,Number(e.target.parentNode.children[0].innerText));
      // console.log(dayy)
      if(dayy == 0) {
        day_num.innerText = week_now;
      }else if(dayy > 0){
        day_num.innerText = `${dayy}天后`;
      }else{
        day_num.innerText = `${Math.abs(dayy)}天前`;
      }
    }
  }

}



